<template>
	<div id="root" class="mp-box">
		<!-- 状态栏 -->
		<div :class="['mp-bar-box',barBgColor]">
			<div>小程序</div>
			<div class="capsule-box">
				<div></div>
				<!-- – — -->
				<div class="capsule-box-minimize">–</div>
				<!-- ✕× -->
				<div class="capsule-box-close">×</div>
			</div>
		</div>
		<div class="mp-body-box">
			
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import {Application} from '../application'


const appContainer = ref<HTMLElement | object | undefined | null>(null); // 明确指定类型

const root = document.getElementById("#app");

const barBgColor=ref("mp-bar-bg-black");

onMounted(() => {
	/* const div= document.createElement("div");
	const root = document.getElementById("root");
	div.innerHTML="raymondsss";
	root?.appendChild(div); */

	init();
	
	const wx=new Application();
	console.log(wx)
	open(wx);

})

const init=()=>{
	appContainer.value=root?.querySelector(".mp-body-box");

	updateDeviceBarColor("white");

}

//设置状态栏颜色模式
const updateDeviceBarColor=(color)=>{
    if(color=="black"){
		barBgColor.value="mp-bar-bg-black";
	}else if(color=="white"){
		barBgColor.value="mp-bar-bg-white";
	}
}

//打开微信应用
const open=(app)=>{
    app.parent=this;
	console.log(app)
	// appContainer.value.appendChild(app.el);
	console.dir(appContainer.value)
}

</script>

<style scoped>
	.mp-box{
		display: flex;
		flex-direction:column;
		width:100%;
		height:100%;
	}

	.mp-bar-box{
		overflow: hidden;
		height:50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 10px;
		flex-shrink: 0;
		.capsule-box{
			width:100px;
			height:25px;
			border:1px solid #ccc;
			border-radius: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 20px;
			cursor: pointer;
			overflow: hidden;
			div{
				width:30%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			div:hover{
				background-color: #ddd;
			}
		}
	}
	.mp-bar-bg-black{
		background-color: black;
		color:#fff;
	}
	.mp-bar-bg-white{
		background-color: white;
	}

	.mp-body-box{
		flex:1;
		display: flex;
		overflow: hidden;
	}

</style>
